<template>
  <div class="filter-container">
    <!-- 行业类型 -->
    <div class="filter-section" v-show="type === 'jydt'||type === 'qyfws'">
      <div class="filter-header">
        <div class="filter-title">行业类型：</div>
        <div class="filter-options">
          <div
              v-for="(option, index) in industryOptions"
              :key="'industry-'+index"
              class="option"
              :class="{ 'selected': selectedIndustry.includes(index) }"
              @click="toggleOption('industry', index)"
          >
            {{ option }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 服务类型 -->
    <div class="filter-section" v-show="type === 'qyfws'||type === 'zjzy'">
      <div class="filter-header">
        <div class="filter-title">服务类型：</div>
        <div class="filter-options">
          <div
              v-for="(option, index) in serviceOptions"
              :key="'service-'+index"
              class="option"
              :class="{ 'selected': selectedService.includes(index) }"
              @click="toggleOption('service', index)"
          >
            {{ option }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>


    <!-- 需求类型 -->
    <div class="filter-section" v-show="type === 'jydt'">
      <div class="filter-header">
        <div class="filter-title">需求类型：</div>
        <div class="filter-options">
          <div
              v-for="(option, index) in serviceOptions"
              :key="'service-'+index"
              class="option"
              :class="{ 'selected': selectedService.includes(index) }"
              @click="toggleOption('service', index)"
          >
            {{ option }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 机构类型 -->
    <div class="filter-section" v-show="type === 'kyjg'">
      <div class="filter-header">
        <div class="filter-title">机构类型：</div>
        <div class="filter-options">
          <div
              v-for="(option, index) in orgOptions"
              :key="'org-'+index"
              class="option"
              :class="{ 'selected': selectedOrg.includes(index) }"
              @click="toggleOption('org', index)"
          >
            {{ option }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <!-- 行业分类 -->
    <div class="filter-section" v-show="type === 'hyjjfa'">
      <div class="filter-header">
        <div class="filter-title">机构类型：</div>
        <div class="filter-options">
          <div
              v-for="(option, index) in hyOptions"
              :key="'org-'+index"
              class="option"
              :class="{ 'selected': selectedOrg.includes(index) }"
              @click="toggleOption('hy', index)"
          >
            {{ option }}
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <!-- 机构名称 -->
    <div class="filter-section" v-show="type === 'kyjg'">
      <div class="filter-row">
        <div class="filter-title">机构名称：</div>
        <el-input v-model="orgName" placeholder="请输入机构名称" class="filter-input"></el-input>
        <el-button type="primary" class="search-btn">搜索</el-button>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 企业名称 -->
    <div class="filter-section" v-show="type === 'qyfws' || type ==='hyjjfa'">
      <div class="filter-row">
        <div class="filter-title">企业名称：</div>
        <el-input v-model="companyName" placeholder="请输入企业名称" class="filter-input"></el-input>
        <el-button type="primary" class="search-btn">搜索</el-button>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 需求名称 -->
    <div class="filter-section" v-show="type === 'jydt'">
      <div class="filter-row" >
        <div class="filter-title">需求名称：</div>
        <el-input v-model="demandName" placeholder="请输入需求名称" class="filter-input"></el-input>
        <el-button type="primary" class="search-btn">搜索</el-button>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 专家名称 -->
    <div class="filter-section" v-show="type === 'zjzy'">
      <div class="filter-row">
        <div class="filter-title">专家名称：</div>
        <el-input v-model="expertName" placeholder="请输入专家名称" class="filter-input"></el-input>
        <el-button type="primary" class="search-btn">搜索</el-button>
      </div>
      <el-divider></el-divider>
    </div>

    <!-- 发布时间 -->
    <div class="filter-section" v-show="type === 'jydt'">
      <div class="filter-row">
        <div class="filter-title">发布时间：</div>
        <el-date-picker
            v-model="publishDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="date-picker"
        ></el-date-picker>
      </div>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdvancedFilter',
  props: {
    type: {
      type: String,
      default: '' // Default value if not provided
    },
  },
  data() {
    return {
      // 选项数据
      industryOptions: ['全部', '新材料', '其他', '食品加工', '冶金', '生物医药', '汽车制造', '轻工纺织', '装备制造', '化工', '造船造业', '机械加工'],
      serviceOptions: ['全部', '其他', '互联互通', '工业机器人', '云服务', '集成平台', '安全保障', '生产运营', '供应链协同'],
      orgOptions: ['全部', '其他', '科研单位', '科研究所', '研究院', '研究所', '研究中心'],
      hyOptions: ['全部', '新材料', '其他', '食品加工', '冶金', '生物医药', '汽车制造', '轻工纺织', '装备制造', '化工', '造船造业', '机械加工', '管材制造'],
      // 选中状态
      selectedIndustry: [],
      selectedService: [],
      selectedOrg: [],

      // 输入框数据
      orgName: '',
      companyName: '',
      demandName: '',
      expertName: '',
      publishDateRange: [],
    }
  },
  methods: {
    toggleOption(type, index) {
      const selectedArray = this[`selected${type.charAt(0).toUpperCase() + type.slice(1)}`];
      const optionIndex = selectedArray.indexOf(index);

      if (index === 0) { // 处理"全部"选项
        selectedArray.length = 0;
        selectedArray.push(0);
      } else {
        if (optionIndex > -1) {
          selectedArray.splice(optionIndex, 1);
          // 如果取消选中后数组为空，自动选中"全部"
          if (selectedArray.length === 0) {
            selectedArray.push(0);
          }
        } else {
          // 如果选中非"全部"选项，先移除"全部"选项
          const allIndex = selectedArray.indexOf(0);
          if (allIndex > -1) {
            selectedArray.splice(allIndex, 1);
          }
          selectedArray.push(index);
        }
      }
    }
  }
}
</script>

<style scoped>
.filter-container {
  background-color: white;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.filter-section {
  margin-bottom: 10px;
}

.filter-header {
  display: flex;
  margin-bottom: 15px;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.filter-title {
  font-weight: bold;
  color: #333;
  margin-right: 15px;
  white-space: nowrap;
  width: 80px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option:hover {
  color: #1890ff;
}

.option.selected {
  border-color: #1890ff;
  color: #1890ff;
  background-color: #f0f7ff;
}

.filter-input {
  width: 300px;
  margin-right: 10px;
}

.search-btn {
  margin-left: 10px;
}

.date-picker {
  width: 350px;
}

.el-divider {
  margin: 10px 0;
}
</style>